<template>
  <div class="reachBox">
    <p class="tltle">Our Reach</p>
    <div>
      <ul class="reachNum">
        <li style="background:rgba(163,97,65,1)">
          <p>1000000</p>
          <div>Users</div>
        </li>
        <li style="background:rgba(155,153,0,1)">
          <p>3000+</p>
          <div>Customers</div>
        </li>
        <li style="background:rgba(0,111,54,1)">
          <p>80+</p>
          <div>Countries</div>
        </li>
        <li style="background:rgba(18,89,133,1)">
          <p>1,000+</p>
          <div>Colleagues</div>
        </li>
      </ul>
    </div>

    <div>
      <img src="@/assets/img/map.jpg" style="width: 1200px; height: 580px" />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
.reachBox {
  width: 1200px;
  margin: auto;
  .tltle {
    font-weight: 400;
    font-size: 52px !important;
    line-height: 60px !important;
    margin-bottom: 30px;
    color: #1685a9;

  }
  .reachNum {
    display: flex;
    flex-direction: row;
    padding: 0 50px;
    justify-content: space-between;
    li {
      width: 25%;
      margin-bottom: 30px;
      margin: 0 10px 20px;
      padding:  10px 0;
      border-radius: 5px;
      box-shadow: 0px 4px 12px #999;
      p{
          font-size: 38px;
          color: #fff;
          margin-bottom: 6px;
      }
      div{
          color: #fff;
      }
      
    }
  }
}
</style>